<template>

  <div style="margin-top: 15px;">
    <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
      <el-select v-model="select" slot="prepend" placeholder="请选择">
        <el-option label="餐厅名" value="1"></el-option>
        <el-option label="订单号" value="2"></el-option>
        <el-option label="用户电话" value="3"></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
    </el-input>

    <span>Message: {{ getMsg() }}</span>

    <el-row>
      <el-button @click="testGet">Get</el-button>
      <el-button @click="testPost">Post</el-button>
      <el-button @click="testDate">Test Date</el-button>

    </el-row>

    <el-row>
    <div class="block">
      <span class="demonstration">默认</span>
      <el-date-picker
        v-model="datevalue"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期">
      </el-date-picker>
    </div>
    </el-row>

    <el-row>
      <el-popover
        placement="top"
        width="160"
        v-model="visible">
        <p>这是一段内容这是一段内容确定删除吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="cancleDelete">取消</el-button>
          <el-button type="primary" size="mini" @click="doDelete">确定</el-button>
        </div>
        <el-button type="text" slot="reference">删除</el-button>

      </el-popover>

    </el-row>
  </div>
</template>

<script>
  import { getDemo , postDemo} from '@/api/demo'

  export default {
    data() {
      return {
        input3: '',
        select: '',
        msg:'test {{}}',
        datevalue:'',
        visible: false
      }
    },
    methods:{
      search(){
        postDemo().then(response => {
          this.input3 = response.data
          console.info("search, " + JSON.stringify(response))
          console.info("current select, " + this.select)

        })
      },
      getMsg(){
        return 'test getMsg'
      },
      testGet(){
        getDemo().then(response => {
          this.input3 = response.data
          console.info("getDemo, " + JSON.stringify(response))

        })
      },
      testPost(){
        postDemo().then(response => {
          this.input3 = response.data
          console.info("postDemo, " + JSON.stringify(response))

        })
      },
      testDate() {
        console.info("current : " + this.datevalue)

        console.info("testDate, " + JSON.stringify(this.datevalue))
      },
      doDelete(){
        this.visible = false;

        console.info("doDelete")

      },
      cancleDelete(){
        this.visible = false;

        console.info("cancleDelete")

      }

      }
  }
</script>

<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
